<script lang="ts" setup>
import { useTimeSlots, formatTimeSlot } from '@/composables/use-time-picker'
import { ref, watch } from 'vue'

const props = defineProps<{
    modelValue: string  // 接收父组件传递的值
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', timeSlot: string): void
}>()

// 使用父组件传入的初始值
const visitTime = ref({
    timeSlot: props.modelValue || ''
})

// 当父组件传入的值变化时更新本地状态
watch(() => props.modelValue, (newVal) => {
    visitTime.value.timeSlot = newVal
})

const timeSlots = useTimeSlots({
    startHour: 8,
    endHour: 22,
    minHoursAfterNow: 1
})

const handleTimeChange = (e: any) => {
    const selectedTimeSlot = timeSlots.value[e.detail.value].value
    visitTime.value.timeSlot = selectedTimeSlot
    emit('update:modelValue', selectedTimeSlot)  // 传递完整的时间字符串
}
</script>

<template>
    <!-- 时间选择 -->
    <picker mode="selector" :range="timeSlots" range-key="label" @change="handleTimeChange">
        <view class="picker">
            <view>
                {{ formatTimeSlot(visitTime.timeSlot) }}
            </view>
            <uni-icons custom-prefix="iconfont" color="#0c101c" type="icon-you" size="24"></uni-icons>
        </view>
    </picker>
</template>


<style lang="scss" scoped>
.picker {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>